  import Tabs from "@mui/material/Tabs";
  import Tab from "@mui/material/Tab";
  import { useState } from "react";
  import TabPanel from "components/TabPanel";
  import styled from "styled-components";
  import Layout from "components/Layout";
import DayChartList from "./day_charts";
import week_charts from "./week_charts";
import WeekChartList from './week_charts'
import MonthChartList from './month_charts'
import { ThemeProvider } from "@mui/material/styles";
import { tabstheme } from "themes";
const StatisticsHome = () => {
 

 
  return (
    <Layout>
      <div>
        <StatisticsTabBar></StatisticsTabBar>
      </div>
    </Layout>
  );
};

const StatisticsTabBar = () => {
 
  const [value, setValue] = useState(0);
  const TabWrapper = styled.div`
    background-color: #fff;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
  `;
  const handleChange = (event: any, newValue: number) => {
    setValue(newValue);
  };

  return (
    <div>
      <TabWrapper>
        <ThemeProvider theme={tabstheme}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="basic tabs example"
        >
          <Tab label="日统计" />
          <Tab label="周统计" />
          <Tab label="月统计" />
        </Tabs>
        </ThemeProvider>
      </TabWrapper>
      <div>
        <TabPanel value={value} index={0}>
          <DayChartList />
        </TabPanel>
        <TabPanel value={value} index={1}>
         <WeekChartList/>
        </TabPanel>

        <TabPanel value={value} index={2}>
          <MonthChartList/>
        </TabPanel>
      </div>
    </div>
  );
};
export default StatisticsHome;
